<template>
	<view class="box">
		<view class="user_top">
			<image src="../../static/image/index/a@2x.png" class="top_img" @click="get_detect('user')">
			</image>
		</view>
		<view class="top hidden">
			<view class="font_42 color_fff text_bold top_m1">无包游·让旅游更简单</view>
			<view class="font_31 color_fff8 text_bold top_m2">轻松游玩每一个城市</view>
		</view>
		<view class="site_wrapper bg_fff hidden">
			<view class="site_top flex1">
				<view class="r_19 bg_27c1c2 site_top_m1"></view>
				<view @click="get_detect('/pages/index/city_search')">
					<view class="flex2">
						<view class="font_35 color_27c1c2 text_bold">{{city_info.city?city_info.city: '定位中'}}</view>
						<view class="site_top_icon"></view>
					</view>
					<view class="font_19 color_27c1c2 text_bold site_top_m2">点击切换城市</view>
				</view>
			</view>
			<view class="site_two flex3 bg_f5" @click="get_detect('goal')">
				<view class="r_19 bg_ff6a00 site_two_m1"></view>
				<view class="font_38 w_flex1" v-if="hot_data.region_id">{{hot_data.region_name}}</view>
				<view class="font_38 text_bold color_ac w_flex1" v-else>位置/地标/景点</view>
				<image src="../../static/image/index/b.png" class="site_two_m2"></image>
			</view>
			<image src="../../static/image/index/c@2x.png" class="site_btn" @click="get_detect('map')">
			</image>
		</view>
		<view class="wrapper flex4">
			<view class="block" v-for="item in block_list" :key="item" @click="get_detect(item.url)">
				<image :src="item.icon"></image>
				<view class="color_18 font_23 text_bold">{{item.title}}</view>
			</view>
		</view>
		<view class="wrapper flex4">
			<view class="block" v-for="item in block_list1" :key="item">
				<view v-if="item.url" @click="get_detect(item.url)">
					<image :src="item.icon"></image>
					<view class="color_18 font_23 text_bold">{{item.title}}</view>
				</view>
				<view v-else>
					<button plain open-type="contact" v-if="!item.url" style="border: 0px;padding: 0px;">
						<image :src="item.icon"></image>
						<view class="color_18 font_23 text_bold">{{item.title}}</view>
					</button>
				</view>
			</view>
		</view>
		<view class="share_wrapper bg_fff flex1" v-for="item in share_list" :key="item" @click="get_detect(item.url)">
			<view class="w_flex1" style="display: flex; align-items: center; justify-content: space-between; padding: 20rpx 0;">
				<view class="font_35 text_bold color_18 share_title">{{item.title}}</view>
				<view class="font_27 color_ac">立即查看></view>
			</view>
		</view>
    <view class="zb-dd">
      <view class="tit font_35 text_bold color_18">附近寄存点</view>
      <view class="list">
        <navigator :url="'./detail?id=' + item.id" v-for="(item, index) in fjList" :key="index" class="dd">
          <!-- <view class="mi">603m</view> -->
          <view class="a" v-if="!item.orders"></view>
          <image :src="item.image_text[0]" mode="aspectFill" class="img"></image>
          <view class="div">
            <view class="p1">{{item.store_name}}</view>
            <view class="p2">营业时间：{{item.business_hours_start}}~{{item.business_hours_end}}</view>
            <view class="flex1" style="margin-top: 8rpx; align-items: center; " v-if="item.position">
              <image src="../../static/image/index/w@2x.png" mode="heightFix" style="height: 25rpx;width: 20rpx;margin: 4rpx 16rpx 0 0;" />
              <view class="font_23 flex1 color_7b" style="flex: 1; width: 100%;">{{item.position}}</view>
            </view>
          </view>
        </navigator>
      </view>
    </view>
    <v-copy></v-copy>
    
		<!-- 优惠券 -->
		<v-coupon :is_show="coupon_show" :coupon_list="coupon_list" @close="coupon_show = false;"></v-coupon>
	</view>
</template>

<script>
	// 优惠券暂无接口；
	import coupon from './component/coupon.vue';
  import copy from '@/components/copy.vue';
  
	export default {
		components: {
			'v-coupon': coupon,
      'v-copy':copy
		},
		data() {
			return {
				cityId: null,
				city_info: {},
				share_code: '', // 上级code
				hot_data: {}, // 目的地
				coupon_list: [], // 优惠券
				coupon_show: false, // 优惠券
				block_list: [{
					title: '我的订单',
					url: '/pages/user/order',
					icon: '/static/image/index/d@2x.png',
				}, {
					title: '常见问题',
					url: '/pages/user/issue',
					icon: '/static/image/index/e@2x.png',
				}, {
					title: '商家入驻',
					url: '/pages/user/cooperat',
					icon: '/static/image/index/f@2x.png',
				}],
				block_list1:[
					{
						title: '使用指南',
						url: '/pages/fwb/index?type=jczn',
						icon: '/static/image/index/g@2x.png',
					}, {
						title: '优惠券',
						url: '/pages/fwb/coupon',
						icon: '/static/image/index/coupon.png',
					}, {
						title: '在线客服',
						url: '',
						icon: '/static/image/index/customer@12.png',
					}
				],
        fjList:[],
				share_list: [
					// {
					// 	url: '/pages/index/invite',
					// 	title: '分享好礼，立得折扣卷',
					// 	icon: '/static/image/index/h@2x.png'
					// }, 
					{
						url: '/pages/fwb/index?type=jcxz',
						title: '寄存须知',
						icon: '/static/image/index/i@2x.png'
					},
          // {
          // 	url: '/pages/fwb/index?type=aqbz',
          // 	title: '寄存安全保障',
          // 	icon: '/static/image/index/i@2x.png'
          // }
				]
			}
		},
		onLoad(e) {
			let city_data = uni.getStorageSync('cityData') || '';
			let hot_data = uni.getStorageSync('hotArea') || '';

			if (!city_data) {
				this.get_location();
			}

			if (hot_data) {
				uni.removeStorageSync('hotArea');
				// this.hot_data = hot_data;
			} else {
				this.hot_data = {};
			}

			// if (uni.getStorageSync('token')) {
			// 	this.getNewUserCoupon()
			// }

			if (e.share_code) {
				this.share_code = e.share_code;
			}

			// 下载新版本
			getApp().get_new_v();
		},
		onShow() {
			let city_data = uni.getStorageSync('cityData') || '';
			let hot_data = uni.getStorageSync('hotArea') || '';
      console.log('city_data=========>',city_data)
			if (city_data) {
				this.city_info = uni.getStorageSync('cityData');
				this.get_city_id();
        //获取附近点
        this.$http.post(this.$api.getStoreListByRegionNameApi, {
        	region_name: this.city_info.city
        }).then(res => {
        	console.log('res=>>',res)
          this.fjList = res.data;
        })
			}

			if (hot_data) {
				uni.removeStorageSync('hotArea');
				// this.hot_data = hot_data;
			} else {
				this.hot_data = {};
			};
      
      uni.setStorageSync('upOrder',1)
      
      
      
		},
		methods: {
			// 定位
			get_location() {
				let self = this;
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						// 同意授权
						self.get_city_name(res);
					},
					fail(res) {
						// 拒绝授权
						getApp().get_msg('您拒绝了定位');
						self.get_shanghai_info();
					}
				});
			},
			get_city_name(res) {
				let self = this;

				getApp().get_l_l_name(res, function(res_) {
					let location_info = {
						city: res_.result.ad_info.city,
						latitude: res.latitude,
						longitude: res.longitude
					}

					self.city_info = location_info;
					uni.setStorageSync('cityData', location_info);
					self.get_city_id();
				})
			},
			get_shanghai_info() {
				let self = this;
				// 上海市人民政府 定位信息
				getApp().get_name_l_l('上海市人民政府', function(res) {
					let location_info = {
						city: '上海市',
						latitude: res.result.location.lat,
						longitude: res.result.location.lng
					}

					self.city_info = location_info;
					uni.setStorageSync('cityData', location_info);
					self.get_city_id();
				})
			},
			// 检查是否登录再跳转页面
			get_detect(e) {
				let self = this;
				let token = uni.getStorageSync('token');

				if (!token) {
					getApp().get_navigate_url('/pages/index/login?share_code=' + self.share_code);
				}

				if (token) {
					if (e === 'goal') {
						getApp().get_navigate_url('./map?type=area');

						return

						if (this.hot_data.region_id) {
							getApp().get_navigate_url('./map?type=area');
						} else {
							getApp().get_navigate_url('./search');
						}
						return
					}

					if (e === 'map') {
						getApp().get_navigate_url('./map');

						return

						if (this.hot_data.region_id) {
							getApp().get_navigate_url('./map?type=area');
						} else {
							getApp().get_navigate_url('./map?type=city');
						}
						return
					}

					if (e === 'user') {
						// 我的
						uni.switchTab({
							url: '/pages/user/index'
						});

						return
					}

					if (e === '/pages/user/order') {
						// 我的订单
						uni.switchTab({
							url: e
						});

						return
					}

					getApp().get_navigate_url(e)
				}
			},
			// 根据城市名称获取首页默认城市
			get_city_id() {
				let city_data = uni.getStorageSync('cityData') || '';

				if (city_data.cityId) {
					this.cityId = city_data.cityId;
				} else {
					this.$http.get(this.$api.getAddressByName, {
						region_name: this.city_info.city
					}).then(res => {
						this.cityId = res.data.id;

						city_data.cityId = res.data.id;
						uni.setStorageSync('cityData', city_data);
					})
				}
			},
			// 获取新人优惠券
			getNewUserCoupon() {
				this.$http.get(this.$api.getNewUserCoupon).then(res => {
					this.coupon_list = res.data;

					if (this.coupon_list.length > 0) this.coupon_show = true;
				})
			}
		}
	}
</script>

<style lang="less">
  page{background-color: #f5f5f5;}
  .a{background: hsla(0,0%,100%,.7); position: absolute; width: 100%; height: 200rpx; left: 0; top: 0;z-index: 2;background: hsla(0,0%,100%,.4);backdrop-filter: blur(4px);}
  .zb-dd{
    padding: 0 20rpx; margin-top: 46rpx;
    .tit{margin-bottom: 20rpx;}
    .list{display: flex; justify-content: space-between; flex-wrap: wrap;}
    .dd{position: relative; width: 48.5%; background-color: #fff; border-radius: 14rpx; overflow: hidden; margin-bottom: 20rpx;}
    .img{width: 100%; height: 200rpx;}
    .mi{position: absolute; right: 0; top: 0; z-index: 30; background-color: #FF6A00; color: #fff; font-size: 20rpx; padding: 4rpx 8rpx; border-radius: 0 0 0 14rpx;}
    .p2{color: #666; font-size: 26rpx; margin-top: 8rpx;}
    .p1{font-size: 30rpx;}
    .div{padding: 10px;}
  }
	.box {
		height: 100vh;
		overflow-y: auto;
		padding: 194rpx 0 0;
		box-sizing: border-box;background-color: #f5f5f5;
	}

	.top {
		background: linear-gradient(180deg, #FF6A00 0%, #FF6A00 40%, rgba(243, 123, 34, 0.89) 73%, rgba(238, 131, 50, 0.56) 88%, rgba(223, 223, 223, 0) 100%);

		.top_m1 {
			margin: 15rpx 0 0 62rpx;
		}

		.top_m2 {
			margin: 21rpx 0 404rpx 62rpx;
		}
	}

	.user_top {
		top: 0;
		left: 0;
		right: 0;
		position: fixed; z-index: 980;
		padding: 108rpx 0 35rpx;
		background-color: #FF6A00;

		.top_img {
			width: 54rpx;
			height: 54rpx;
			margin-left: 19rpx;
		}
	}

	.site_wrapper {
		width: 719rpx;
		margin: -317rpx auto 0;
		border-radius: 35rpx;
		box-shadow: 0px 6px 12px rgba(143, 143, 143, 0.16);

		.site_top {
			padding: 0 46rpx;
			margin: 35rpx 0 31rpx;
		}

		.site_top_m1 {
			margin: 15rpx 25rpx 0 0;
		}

		.site_top_m2 {
			margin: 4rpx 0 0;
		}

		.site_top_icon {
			width: 0;
			height: 0;
			margin-bottom: 8rpx;
			border-bottom: 17rpx solid #27C1C2;
			border-left: 17rpx solid transparent;
		}

		.site_two {
			height: 100rpx;
			width: 654rpx;
			margin: 0 auto;
			border-radius: 23rpx;

			.site_two_m1 {
				margin: 0 23rpx 0 13rpx;
			}

			.site_two_m2 {
				margin: 0 31rpx 0 0;
			}

			image {
				width: 46rpx;
				height: 46rpx;
			}
		}

		.site_btn {
			width: 688rpx;
			height: 131rpx;
			margin: 33rpx auto 8rpx;
		}
	}

	.block {
		text-align: center;

		image {
			width: 112rpx;
			height: 112rpx;
		}
	}

	.wrapper {
		margin: 29rpx 0 35rpx;
	}

	.share_wrapper {
		width: 719rpx;
		border-radius: 19rpx;
		margin: 0 auto 19rpx;
		padding: 13rpx 23rpx 13rpx 35rpx;
		box-sizing: border-box;
		border: 1px solid #EFF1F4;
		box-shadow: 0px 6px 12px #EBEBEB;

		&:last-child {
			margin-bottom: 86rpx;
		}

		.share_title {
			// min-height: 104rpx;
			// margin: 21rpx 0 35rpx;
		}

		image {
			width: 212rpx;
			height: 212rpx;
			margin-left: 21rpx;
		}
	}
</style>
